<template>
  <div>
    <input v-model="newTodo" placeholder="Add a new task" @keyup.enter="addTodo" />
    <button @click="addTodo">添加</button>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, type Ref } from 'vue';

export default defineComponent({
  name: 'TodoInput',
  setup(_, { emit }) {
    const newTodo: Ref<string> = ref('');

    const addTodo = () => {
      if (newTodo.value.trim()) {
        emit('add-todo', newTodo.value);
        newTodo.value = '';
      }
    };

    return { newTodo, addTodo };
  }
});
</script>